<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>Bootstrap 模板</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<!-- 设置字符编码集为国际编码 -->
		<meta charset="utf-8">
		<!-- IE兼容模式 通知 IE 采用其所支持的最新的模式 -->
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
		<link rel="stylesheet" href="animate.css" />
		<link rel="stylesheet" href="maxModal.css" />
   	</head>
	<body>
		<div id="showDialog">点我...</div>
		<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
		<script type="text/javascript" src="maxModal-0.3.js" ></script>
		<script>
			$(function(){
				$("#showDialog").on("click",function(){
					var d = $.MaxDialog();
						setTimeout(function(){
							d.close();
						},1000)
					
					var modal = $.MaxDialog({
						"id":"ILove",
						"width":"80%",
						"height":"80%",
						"opacity":0.6,
						"maskClose":false,
						"title":"标题",
			//			"time":1,
						"animateTime":2,
						"animateInClass":"headShake",
						"animateOutClass":"fadeOut",
						"content":"<div style='text-align:center'><img src ='images/jiazai.gif'></div>",
						"buttons":[
									{
										"text":"确定",
										"type":"success",
										"callback":function(){
											alert(1)
										}
									},
									{
										"text":"取消",
										"type":"cancel",
										"callback":function(){
											alert(2);
											//return false时，不关闭模态框
											return false;
										}
									},
									{
										"text":"",
										"type":"close"
									}
								],
						"showBefore":function(){
							alert(1);	
						},
						"showAfter":function(){
							alert(2);	
						},
						"hideBefore":function(){
							alert(3);	
						},
						"hideAfter":function(){
							alert(4);	
						}
					})
				});
			});
		</script>
	</body>
</html>
